<template>
  <div class="ExhibitionInfoForm-container">
    <el-form
      ref="formRef"
      :model="form"
      :rules="formRules"
      class="form"
      @submit.prevent="onSubmit"
    >
      <div class="remark">
        备注：根据公安局要求，主办方需提供含参展人员在内的个人信息，故现与展商证件申请基本信息一并收集，无需重复填写，感谢您的理解与支持~
      </div>
      <div class="apply">
        <div class="can">可申请：10；</div>
        <div class="yet">已申请：0；</div>
        <div class="not">未申请：0；</div>
      </div>
      <!-- 姓名 -->
      <div class="item" style="margin-top: 20px">
        <div class="title">姓名</div>
        <el-form-item prop="username">
          <el-input
            v-model="form.username"
            type="text"
            :class="{ 'view-mode-input': props.mode === 'view' }"
            :input-style="textareaStyle"
            placeholder="姓名"
            :disabled="props.mode === 'view'"
            @input="handleNameInput"
            @paste="handleNamePaste"
            @keypress="handleNameKeypress"
            @blur="validateField('username')"
          />
        </el-form-item>
      </div>
      <!-- 性别 -->
      <div class="item">
        <div class="title">性别</div>
        <el-form-item prop="gender">
          <el-radio-group
            v-model="form.gender"
            style="width: 480px"
            :disabled="props.mode === 'view'"
            @change="validateField('gender')"
          >
            <el-radio value="0" size="large">男</el-radio>
            <el-radio value="1" size="large">女</el-radio>
          </el-radio-group>
        </el-form-item>
      </div>
      <!-- 单位 -->
      <div class="item">
        <div class="title">单位</div>
        <el-form-item prop="unit">
          <el-input
            v-model="form.unit"
            type="text"
            :class="{ 'view-mode-input': props.mode === 'view' }"
            :input-style="textareaStyle"
            placeholder="单位"
            :disabled="props.mode === 'view'"
            @input="handleUnitInput"
            @paste="handleUnitPaste"
            @keypress="handleUnitKeypress"
            @blur="validateField('unit')"
          />
        </el-form-item>
      </div>
      <!-- 职务 -->
      <div class="item">
        <div class="title">职务</div>
        <el-form-item prop="job">
          <el-input
            v-model="form.job"
            type="text"
            :class="{ 'view-mode-input': props.mode === 'view' }"
            :input-style="textareaStyle"
            placeholder="职务"
            :disabled="props.mode === 'view'"
            @input="handleJobInput"
            @paste="handleJobPaste"
            @keypress="handleJobKeypress"
            @blur="validateField('job')"
          />
        </el-form-item>
      </div>
      <!-- 手机 -->
      <div class="item">
        <div class="title">手机</div>
        <el-form-item prop="telephone">
          <el-input
            v-model="form.telephone"
            type="text"
            :class="{ 'view-mode-input': props.mode === 'view' }"
            :input-style="textareaStyle"
            placeholder="手机"
            :disabled="props.mode === 'view'"
            @input="handlePhoneInput"
            @paste="handlePhonePaste"
            @keypress="handleNumberKeypress"
            @blur="validateField('telephone')"
          />
        </el-form-item>
      </div>
      <!-- 邮箱 -->
      <div class="item">
        <div class="title">邮箱</div>
        <el-form-item prop="email">
          <el-input
            v-model="form.email"
            type="text"
            :class="{ 'view-mode-input': props.mode === 'view' }"
            :input-style="textareaStyle"
            placeholder="邮箱"
            :disabled="props.mode === 'view'"
            @input="handleEmailInput"
            @paste="handleEmailPaste"
            @keypress="handleEmailKeypress"
            @blur="validateField('email')"
          />
        </el-form-item>
      </div>
      <!-- 身份证 -->
      <div class="item">
        <div class="title">身份证</div>
        <el-form-item prop="id_card">
          <el-input
            v-model="form.id_card"
            type="text"
            :class="{ 'view-mode-input': props.mode === 'view' }"
            :input-style="textareaStyle"
            placeholder="身份证"
            :disabled="props.mode === 'view'"
            @input="handleIdCardInput"
            @paste="handleIdCardPaste"
            @keypress="handleIdCardKeypress"
            @blur="validateField('id_card')"
          />
        </el-form-item>
      </div>
      <!-- 现居住地址 -->
      <div class="item">
        <div class="title">现居住地址</div>
        <el-form-item prop="addres1">
          <el-input
            v-model="form.addres1"
            type="text"
            :class="{ 'view-mode-input': props.mode === 'view' }"
            :input-style="textareaStyle"
            placeholder="现居住地址"
            :disabled="props.mode === 'view'"
            @input="handleAddressInput"
            @paste="handleAddressPaste"
            @keypress="handleAddressKeypress"
            @blur="validateField('addres1')"
          />
        </el-form-item>
      </div>
      <!-- 户籍地详址 -->
      <div class="item">
        <div class="title">户籍地详址</div>
        <el-form-item prop="addres2">
          <el-input
            v-model="form.addres2"
            type="text"
            :class="{ 'view-mode-input': props.mode === 'view' }"
            :input-style="textareaStyle"
            placeholder="户籍地详址"
            :disabled="props.mode === 'view'"
            @input="handleAddressInput2"
            @paste="handleAddressPaste2"
            @keypress="handleAddressKeypress"
            @blur="validateField('addres2')"
          />
        </el-form-item>
      </div>
      <!-- 照片 -->
      <div class="item">
        <div class="title">照片</div>
        <div class="hint">
          照片上传不得大于
          <span class="intext">500kb</span>
          证件申请截至日期
          <span class="intext">2019-9-1</span>
          日
        </div>
      </div>
      <!-- 上传图片 -->
      <el-form-item class="content" prop="photo">
        <div class="img-box">
          <el-avatar
            :src="getPhotoUrl()"
            shape="square"
            style="
              width: 150px;
              height: 200px;
              background-color: #666;
              border-radius: 0;
            "
          />
          <el-button
            v-if="props.mode !== 'view'"
            size="small"
            type="warning"
            @click="triggerFileUpload"
          >
            点击上传头像
          </el-button>
          <input
            ref="fileInput"
            type="file"
            accept="image/jpeg,image/jpg,image/png"
            style="display: none"
            @change="handleFileChange"
          />
        </div>
      </el-form-item>

      <el-button
        v-if="props.mode === 'view'"
        type="primary"
        round
        class="submit-button"
        style="margin: 0 auto; background-color: #17a2b8"
        @click="handleCancel"
      >
        取消
      </el-button>
      <el-button
        v-else
        type="primary"
        round
        class="submit-button"
        style="margin: 0 auto; background-color: #17a2b8"
        @click="onSubmit"
      >
        {{ props.mode === "add" ? "申请" : "修改" }}
      </el-button>
    </el-form>
  </div>
</template>

<script lang="ts" setup>
import { ref, onMounted, watch } from "vue";
import { ElMessage } from "element-plus";
import {
  applyCertificate,
  updateCertificate,
  getCertificateDetail
} from "@/api/certificate";
import { uploadImage, ImagePath } from "@/api/advertisement";
import {
  validateUploadFile,
  updateUploadConfig,
  FileType
} from "@/utils/uploadFile";
import { certificateFormRules, validatePhotoFile } from "./utils/validation";
import { getExhibitorId } from "@/utils/getExhibitorId";

interface Props {
  mode?: "add" | "view" | "edit";
  initialData?: any;
}

const props = withDefaults(defineProps<Props>(), {
  mode: "add",
  initialData: null
});

const emit = defineEmits(["cancel", "confirm"]);

// 表单引用
const formRef = ref();

// 表单验证规则
const formRules = certificateFormRules;

// 验证单个字段
const validateField = (fieldName: string) => {
  if (formRef.value) {
    formRef.value.validateField(fieldName);
  }
};

// do not use same name with ref
const form = ref({
  id: 0,
  exhibitor_id: getExhibitorId() || 0,
  username: "",
  gender: "",
  unit: "",
  job: "",
  telephone: "",
  email: "",
  id_card: "",
  addres1: "",
  addres2: "",
  photo: "",
  status: 3
});

// 图片预览
const photoPreview = ref("");

// 姓名输入处理 - 只允许中文、英文、空格、连字符和点
const handleNameInput = (value: string) => {
  const filteredValue = value.replace(/[^a-zA-Z\u4e00-\u9fa5\s\-\.]/g, "");
  form.value.username = filteredValue;
};

// 姓名粘贴处理
const handleNamePaste = (event: ClipboardEvent) => {
  event.preventDefault();
  const pastedText = event.clipboardData?.getData("text") || "";
  const filteredValue = pastedText.replace(/[^a-zA-Z\u4e00-\u9fa5\s\-\.]/g, "");
  if (filteredValue) {
    form.value.username = filteredValue;
  }
};

// 姓名键盘输入处理
const handleNameKeypress = (event: KeyboardEvent) => {
  const allowedKeys = [
    "a",
    "b",
    "c",
    "d",
    "e",
    "f",
    "g",
    "h",
    "i",
    "j",
    "k",
    "l",
    "m",
    "n",
    "o",
    "p",
    "q",
    "r",
    "s",
    "t",
    "u",
    "v",
    "w",
    "x",
    "y",
    "z",
    "A",
    "B",
    "C",
    "D",
    "E",
    "F",
    "G",
    "H",
    "I",
    "J",
    "K",
    "L",
    "M",
    "N",
    "O",
    "P",
    "Q",
    "R",
    "S",
    "T",
    "U",
    "V",
    "W",
    "X",
    "Y",
    "Z",
    "Backspace",
    "Delete",
    "ArrowLeft",
    "ArrowRight",
    "Tab",
    "Enter",
    " ",
    "-",
    "."
  ];

  if (!allowedKeys.includes(event.key)) {
    event.preventDefault();
  }
};

// 单位输入处理 - 支持中文、英文、数字、空格、连字符、括号、&、.和逗号
const handleUnitInput = (value: string) => {
  const filteredValue = value.replace(
    /[^a-zA-Z0-9\u4e00-\u9fa5\s\-\(\)（）&.,，。]/g,
    ""
  );
  form.value.unit = filteredValue;
};

// 单位粘贴处理
const handleUnitPaste = (event: ClipboardEvent) => {
  event.preventDefault();
  const pastedText = event.clipboardData?.getData("text") || "";
  const filteredValue = pastedText.replace(
    /[^a-zA-Z0-9\u4e00-\u9fa5\s\-\(\)（）&.,，。]/g,
    ""
  );
  if (filteredValue) {
    form.value.unit = filteredValue;
  }
};

// 单位键盘输入处理
const handleUnitKeypress = (event: KeyboardEvent) => {
  const allowedKeys = [
    "a",
    "b",
    "c",
    "d",
    "e",
    "f",
    "g",
    "h",
    "i",
    "j",
    "k",
    "l",
    "m",
    "n",
    "o",
    "p",
    "q",
    "r",
    "s",
    "t",
    "u",
    "v",
    "w",
    "x",
    "y",
    "z",
    "A",
    "B",
    "C",
    "D",
    "E",
    "F",
    "G",
    "H",
    "I",
    "J",
    "K",
    "L",
    "M",
    "N",
    "O",
    "P",
    "Q",
    "R",
    "S",
    "T",
    "U",
    "V",
    "W",
    "X",
    "Y",
    "Z",
    "0",
    "1",
    "2",
    "3",
    "4",
    "5",
    "6",
    "7",
    "8",
    "9",
    "Backspace",
    "Delete",
    "ArrowLeft",
    "ArrowRight",
    "Tab",
    "Enter",
    " ",
    "-",
    "(",
    ")",
    "&",
    ".",
    ","
  ];

  if (!allowedKeys.includes(event.key)) {
    event.preventDefault();
  }
};

// 职务输入处理 - 支持中文、英文、数字、空格、连字符、括号、&、.和逗号
const handleJobInput = (value: string) => {
  const filteredValue = value.replace(
    /[^a-zA-Z0-9\u4e00-\u9fa5\s\-\(\)（）&.,，。]/g,
    ""
  );
  form.value.job = filteredValue;
};

// 职务粘贴处理
const handleJobPaste = (event: ClipboardEvent) => {
  event.preventDefault();
  const pastedText = event.clipboardData?.getData("text") || "";
  const filteredValue = pastedText.replace(
    /[^a-zA-Z0-9\u4e00-\u9fa5\s\-\(\)（）&.,，。]/g,
    ""
  );
  if (filteredValue) {
    form.value.job = filteredValue;
  }
};

// 职务键盘输入处理
const handleJobKeypress = (event: KeyboardEvent) => {
  const allowedKeys = [
    "a",
    "b",
    "c",
    "d",
    "e",
    "f",
    "g",
    "h",
    "i",
    "j",
    "k",
    "l",
    "m",
    "n",
    "o",
    "p",
    "q",
    "r",
    "s",
    "t",
    "u",
    "v",
    "w",
    "x",
    "y",
    "z",
    "A",
    "B",
    "C",
    "D",
    "E",
    "F",
    "G",
    "H",
    "I",
    "J",
    "K",
    "L",
    "M",
    "N",
    "O",
    "P",
    "Q",
    "R",
    "S",
    "T",
    "U",
    "V",
    "W",
    "X",
    "Y",
    "Z",
    "0",
    "1",
    "2",
    "3",
    "4",
    "5",
    "6",
    "7",
    "8",
    "9",
    "Backspace",
    "Delete",
    "ArrowLeft",
    "ArrowRight",
    "Tab",
    "Enter",
    " ",
    "-",
    "(",
    ")",
    "&",
    ".",
    ","
  ];

  if (!allowedKeys.includes(event.key)) {
    event.preventDefault();
  }
};

// 手机号输入处理 - 只允许数字和连字符
const handlePhoneInput = (value: string) => {
  const filteredValue = value.replace(/[^0-9\-]/g, "");
  // 限制长度为15位
  if (filteredValue.length > 15) {
    form.value.telephone = filteredValue.substring(0, 15);
  } else {
    form.value.telephone = filteredValue;
  }
};

// 手机号粘贴处理
const handlePhonePaste = (event: ClipboardEvent) => {
  event.preventDefault();
  const pastedText = event.clipboardData?.getData("text") || "";
  const filteredValue = pastedText.replace(/[^0-9\-]/g, "");
  if (filteredValue) {
    form.value.telephone = filteredValue.substring(0, 15);
  }
};

// 纯数字键盘输入处理
const handleNumberKeypress = (event: KeyboardEvent) => {
  const allowedKeys = [
    "0",
    "1",
    "2",
    "3",
    "4",
    "5",
    "6",
    "7",
    "8",
    "9",
    "-",
    "Backspace",
    "Delete",
    "ArrowLeft",
    "ArrowRight",
    "Tab",
    "Enter"
  ];

  if (!allowedKeys.includes(event.key)) {
    event.preventDefault();
  }
};

// 邮箱输入处理 - 只允许英文、数字、连字符、下划线、@、.
const handleEmailInput = (value: string) => {
  const filteredValue = value.replace(/[^a-zA-Z0-9\-_@.]/g, "");
  form.value.email = filteredValue;
};

// 邮箱粘贴处理
const handleEmailPaste = (event: ClipboardEvent) => {
  event.preventDefault();
  const pastedText = event.clipboardData?.getData("text") || "";
  const filteredValue = pastedText.replace(/[^a-zA-Z0-9\-_@.]/g, "");
  if (filteredValue) {
    form.value.email = filteredValue;
  }
};

// 邮箱键盘输入处理
const handleEmailKeypress = (event: KeyboardEvent) => {
  const allowedKeys = [
    "a",
    "b",
    "c",
    "d",
    "e",
    "f",
    "g",
    "h",
    "i",
    "j",
    "k",
    "l",
    "m",
    "n",
    "o",
    "p",
    "q",
    "r",
    "s",
    "t",
    "u",
    "v",
    "w",
    "x",
    "y",
    "z",
    "A",
    "B",
    "C",
    "D",
    "E",
    "F",
    "G",
    "H",
    "I",
    "J",
    "K",
    "L",
    "M",
    "N",
    "O",
    "P",
    "Q",
    "R",
    "S",
    "T",
    "U",
    "V",
    "W",
    "X",
    "Y",
    "Z",
    "0",
    "1",
    "2",
    "3",
    "4",
    "5",
    "6",
    "7",
    "8",
    "9",
    "-",
    "_",
    "@",
    ".",
    "Backspace",
    "Delete",
    "ArrowLeft",
    "ArrowRight",
    "Tab",
    "Enter"
  ];

  if (!allowedKeys.includes(event.key)) {
    event.preventDefault();
  }
};

// 身份证输入处理 - 只允许数字和字母X
const handleIdCardInput = (value: string) => {
  const filteredValue = value.replace(/[^0-9Xx]/g, "");
  // 限制长度为18位
  if (filteredValue.length > 18) {
    form.value.id_card = filteredValue.substring(0, 18);
  } else {
    form.value.id_card = filteredValue;
  }
};

// 身份证粘贴处理
const handleIdCardPaste = (event: ClipboardEvent) => {
  event.preventDefault();
  const pastedText = event.clipboardData?.getData("text") || "";
  const filteredValue = pastedText.replace(/[^0-9Xx]/g, "");
  if (filteredValue) {
    form.value.id_card = filteredValue.substring(0, 18);
  }
};

// 身份证键盘输入处理
const handleIdCardKeypress = (event: KeyboardEvent) => {
  const allowedKeys = [
    "0",
    "1",
    "2",
    "3",
    "4",
    "5",
    "6",
    "7",
    "8",
    "9",
    "x",
    "X",
    "Backspace",
    "Delete",
    "ArrowLeft",
    "ArrowRight",
    "Tab",
    "Enter"
  ];

  if (!allowedKeys.includes(event.key)) {
    event.preventDefault();
  }
};

// 地址输入处理 - 支持中文、英文、数字、空格、连字符、括号、逗号和句号
const handleAddressInput = (value: string) => {
  const filteredValue = value.replace(
    /[^a-zA-Z0-9\u4e00-\u9fa5\s\-\(\)（）.,，。]/g,
    ""
  );
  form.value.addres1 = filteredValue;
};

// 地址粘贴处理
const handleAddressPaste = (event: ClipboardEvent) => {
  event.preventDefault();
  const pastedText = event.clipboardData?.getData("text") || "";
  const filteredValue = pastedText.replace(
    /[^a-zA-Z0-9\u4e00-\u9fa5\s\-\(\)（）.,，。]/g,
    ""
  );
  if (filteredValue) {
    form.value.addres1 = filteredValue;
  }
};

// 户籍地址输入处理
const handleAddressInput2 = (value: string) => {
  const filteredValue = value.replace(
    /[^a-zA-Z0-9\u4e00-\u9fa5\s\-\(\)（）.,，。]/g,
    ""
  );
  form.value.addres2 = filteredValue;
};

// 户籍地址粘贴处理
const handleAddressPaste2 = (event: ClipboardEvent) => {
  event.preventDefault();
  const pastedText = event.clipboardData?.getData("text") || "";
  const filteredValue = pastedText.replace(
    /[^a-zA-Z0-9\u4e00-\u9fa5\s\-\(\)（）.,，。]/g,
    ""
  );
  if (filteredValue) {
    form.value.addres2 = filteredValue;
  }
};

// 地址键盘输入处理
const handleAddressKeypress = (event: KeyboardEvent) => {
  const allowedKeys = [
    "a",
    "b",
    "c",
    "d",
    "e",
    "f",
    "g",
    "h",
    "i",
    "j",
    "k",
    "l",
    "m",
    "n",
    "o",
    "p",
    "q",
    "r",
    "s",
    "t",
    "u",
    "v",
    "w",
    "x",
    "y",
    "z",
    "A",
    "B",
    "C",
    "D",
    "E",
    "F",
    "G",
    "H",
    "I",
    "J",
    "K",
    "L",
    "M",
    "N",
    "O",
    "P",
    "Q",
    "R",
    "S",
    "T",
    "U",
    "V",
    "W",
    "X",
    "Y",
    "Z",
    "0",
    "1",
    "2",
    "3",
    "4",
    "5",
    "6",
    "7",
    "8",
    "9",
    "Backspace",
    "Delete",
    "ArrowLeft",
    "ArrowRight",
    "Tab",
    "Enter",
    " ",
    "-",
    "(",
    ")",
    ".",
    ","
  ];

  if (!allowedKeys.includes(event.key)) {
    event.preventDefault();
  }
};

// 监听初始数据变化
watch(
  () => props.initialData,
  newData => {
    if (newData) {
      // 更新表单数据
      form.value = { ...newData };
      // 查看模式下不设置预览，让getPhotoUrl使用表单数据
      if (props.mode === "view") {
        photoPreview.value = "";
      } else if (newData.photo) {
        // 编辑模式下设置预览
        photoPreview.value = newData.photo;
      }
    } else {
      // 清空表单数据
      form.value = {
        id: 0,
        exhibitor_id: getExhibitorId() || 0,
        username: "",
        gender: "",
        unit: "",
        job: "",
        telephone: "",
        email: "",
        id_card: "",
        addres1: "",
        addres2: "",
        photo: "",
        status: 3
      };
      // 清空图片预览
      photoPreview.value = "";
    }
  },
  { immediate: true }
);

// 组件挂载时初始化
onMounted(() => {
  // 设置图片上传配置，原始文件大小不超过500KB
  updateUploadConfig(FileType.IMAGE, {
    maxSize: 500 * 1024, // 500KB
    maxSizeMB: 0.5 // 0.5MB
  });
});

const handleCancel = () => {
  emit("cancel");
};

const onSubmit = async () => {
  try {
    // 使用Element Plus表单验证
    if (formRef.value) {
      const valid = await formRef.value.validate();
      if (!valid) {
        ElMessage.error("请检查表单填写是否正确");
        return;
      }
    }

    // 根据模式调用不同API
    let result: any;
    if (props.mode === "add") {
      result = await applyCertificate(form.value);
      if (result.code === 1) {
        ElMessage.success("证件申请成功！");
        emit("confirm", form.value);
      } else {
        ElMessage.error(result.msg || "证件申请失败！");
      }
    } else if (props.mode === "edit") {
      result = await updateCertificate(form.value);
      if (result.code === 1) {
        ElMessage.success("证件修改成功！");
        emit("confirm", form.value);
      } else {
        ElMessage.error(result.msg || "证件修改失败！");
      }
    }
  } catch (error) {
    console.error("申请失败:", error);
    ElMessage.error("申请失败，请重试");
  }
};

// 上传Logo
const fileInput = ref<HTMLInputElement | null>(null);

const triggerFileUpload = () => {
  fileInput.value?.click();
};

// 上传图片到服务器
const uploadImageToServer = async (file: File): Promise<string | ImagePath> => {
  try {
    const response: any = await uploadImage(file);

    if (response.code === 1) {
      // 兼容后端返回 string 或 { url, full_url }
      return response.data as string | ImagePath;
    } else {
      throw new Error(response.msg || "图片上传失败");
    }
  } catch (error) {
    console.error("图片上传失败:", error);
    throw error;
  }
};

const handleFileChange = async (event: Event) => {
  const target = event.target as HTMLInputElement;
  const file = target.files ? target.files[0] : null;

  // 清空文件输入，允许重复选择同一文件
  if (target) {
    target.value = "";
  }

  if (file) {
    console.log("选择的文件:", file);

    // 使用新的照片验证函数
    const photoValidation = validatePhotoFile(file);
    if (!photoValidation.isValid) {
      ElMessage.error(photoValidation.errors[0]);
      return;
    }

    try {
      // 生成预览URL
      photoPreview.value = URL.createObjectURL(file);

      // 上传图片到服务器（可能返回字符串或对象）
      const imagePath = await uploadImageToServer(file);
      console.log("服务器返回的图片路径:", imagePath);

      if (!imagePath) {
        throw new Error("上传失败，没有获取到图片路径");
      }

      // 解析为字符串 url
      const urlString =
        typeof imagePath === "string"
          ? imagePath
          : imagePath.url || imagePath.full_url || "";

      if (!urlString) {
        throw new Error("上传失败，未解析到有效的图片地址");
      }

      // 将服务器返回的图片路径保存到表单
      form.value.photo = urlString;
      // 清空预览，让getPhotoUrl使用表单数据
      photoPreview.value = "";
      console.log("赋值后的form.value.photo:", form.value.photo);
      console.log("赋值后的form.value:", form.value);

      ElMessage.success("照片上传成功");
    } catch (error) {
      console.error("照片上传失败:", error);
      ElMessage.error("照片上传失败，请重试");
      // 清空预览
      photoPreview.value = "";
      // 清空表单数据
      form.value.photo = "";
    }
  }
};

// 获取照片URL
const getPhotoUrl = () => {
  // 如果是编辑或新增模式且有预览图片，使用预览图片
  if (props.mode !== "view" && photoPreview.value) {
    if (photoPreview.value.startsWith("data:")) {
      return photoPreview.value;
    }
    if (photoPreview.value.startsWith("/")) {
      const BASE_URL = "https://exhibition-bucket.oss-cn-beijing.aliyuncs.com";
      return `${BASE_URL}${photoPreview.value}`;
    }
    if (photoPreview.value.startsWith("http")) {
      return photoPreview.value;
    }
    return photoPreview.value;
  }

  // 如果有表单数据中的图片
  if (form.value.photo) {
    // 如果是Base64数据，直接使用
    if (form.value.photo.startsWith("data:")) {
      return form.value.photo;
    }
    // 如果是相对路径，使用新的OSS域名拼接
    if (form.value.photo.startsWith("/")) {
      const BASE_URL = "https://exhibition-bucket.oss-cn-beijing.aliyuncs.com";
      return `${BASE_URL}${form.value.photo}`;
    }
    // 如果是完整URL，直接使用
    if (form.value.photo.startsWith("http")) {
      return form.value.photo;
    }
    return form.value.photo;
  }

  return "/placeholder-avatar.png";
};

// 输入框样式
const textareaStyle = ref({
  width: "480px",
  height: "40px"
});
</script>
<style lang="scss" scoped>
.ExhibitionInfoForm-container {
  height: 600px;
  overflow-y: auto;

  // 查看模式下的输入框样式（与发票页面保持一致）
  :deep(.view-mode-input .el-input__wrapper) {
    cursor: not-allowed !important;
    background-color: #f7f7f7 !important;
    border: 2px solid #e0e0e0 !important;

    .el-input__inner {
      color: #999 !important;
      cursor: not-allowed !important;
      background-color: transparent !important;
    }
  }

  // 查看模式下的单选按钮组样式
  :deep(.el-radio-group.is-disabled) {
    .el-radio {
      cursor: not-allowed !important;

      .el-radio__input {
        cursor: not-allowed !important;
      }

      .el-radio__label {
        color: #999 !important;
        cursor: not-allowed !important;
      }
    }
  }

  .form {
    display: flex;
    flex-direction: column;
    padding: 20px;
    // 备注
    .remark {
      margin: 10px;
    }
    // 申请
    .apply {
      display: flex;
      justify-content: center;
      width: 100%;
    }

    // 表单项
    .item {
      display: flex;
      justify-content: space-between;
      width: 690px;
      padding-right: 30px;

      .title {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 150px;
        height: 40px;
        background-color: #f8f9fa;
      }

      .annotation {
        display: flex;
        align-items: center;
        justify-content: center;
        color: red;
      }

      // 提示
      .hint {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 480px;
        color: red;

        .intext {
          padding: 1px 2px;
          margin: 0 2px;
          color: #fff;
          background-color: #000;
          border-radius: 2px;
        }
      }
    }

    .content {
      .img-box {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-evenly;
        width: 100%;
        height: 260px;
      }
    }
  }
}
</style>
